<template>
    <div v-loading="loading" id="container" @scroll="handleScroll" ref="container">
        <div class="list" v-for="(item) in showList" :key="item.index">
            <img :src="item.url" />
            <div class="content">
                <h3 class="name">{{ item.index }}-{{ item.name }}</h3>
                <p class="tip">{{ item.feature }}</p>
            </div>
        </div>
        <div ref="blank"></div>
    </div>
    <div class="page">当前页：{{ page }}</div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import { getCurrentInstance } from "vue"
const { proxy } = getCurrentInstance();
const getList = () => {
    return proxy.$http({
        url: "http://rttop.cn/api/?day=4-4&type=html5",
        method: "GET"
    })
}
let loading = true;
const container = ref(null)
const blank = ref(null)
const list = ref([])
const page = ref(1)
const limit = 10
const maxPage = computed(() => Math.ceil(list.value.length / limit))
const showList = computed(() => list.value.slice(0, page.value * limit));
const handleScroll = () => {
    if (page.value > maxPage.value) return
    const clientHeight = container.value?.clientHeight;
    const blankTop = blank.value?.getBoundingClientRect().top;
    if (clientHeight == blankTop - 60) {
        page.value++;
        console.log("加载中...", page.value)
    }
}
onMounted(async () => {
    const { data } = await getList();
    loading = false;
    list.value = data;
})
</script>
<style scoped>
#container {
    height: 480px;
    overflow-y: scroll;
}

.list {
    border-bottom: solid 1px #ccc;
    display: flex;
    padding: 5px 0;
}

.list img {
    width: 60px;
    height: 60px;
    margin-right: 10px;
    border-radius: 50%;
    padding: 5px;
    border: solid 1px #eee;
}

.name {
    margin-top: 5px;
    font-size: 16px;
    color: #777
}

.tip,
.page {
    font-size: 13px;
    color: #777
}
</style>
